<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<c:set var="companyId" value="18" ></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge" >
        <link rel="stylesheet" href="${path }/websites/demopc/css/bootstrap-3.3.5/css/bootstrap.css" type="text/css" >
        <link rel="stylesheet" href="${path }/websites/demopc/css/base.css" media="screen" type="text/css" >
        <link rel="stylesheet" href="${path }/websites/demopc/css/public.css" media="screen" type="text/css" >
       <link href="${path }/resource/css/styleOne/animate.min.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript" src="${path }/websites/demopc/js/jquery-1.11.1.min.js"></script>	
        <script type="text/javascript" src="${path }/websites/demopc/js/pageSwitch.min.js"></script>
        <script type="text/javascript" src="${path }/websites/demopc/js/respond.js"></script>
       
			<cms:setting companyId="${companyId }" var="title" code="title"></cms:setting>
			<title data-index="0" id="selextTitle">${title.paramValue }</title>
    </head>
<body>
<jsp:include page="_top.jsp"></jsp:include>
          <div class="banner">
           <img src="${path }/websites/demopc/images/newsbanner.jpg" alt="" />
          </div>
         <div class="container text-center  news-second">
             <span class="news-title wow animated fadeInUp fadeIn">新闻中心</span>
             <span class="line"></span>
          <div class="wow animated fadeInUp fadeIn" id="app"> 
           
           <div  v-for="art in arts" class="news-list">
                <div class="news-bg">
                    <div class="sm-bg">
                      <h2><a href="#"></a></h2>
                        <span><a  :href="'${path}/websites/demopc/views/news-details.jsp?id='+art.artId">
                        {{art.artCreatetiem | getDate}}</a></span>
                    </div>
                </div>
                <div class="news-content">
                    <ul>
                        <li><h3>
                        <a  :href="'${path}/websites/demopc/views/news-details.jsp?id='+art.artId">
                        {{art.artTitle}}</a></h3></li>
                        <li><p>{{art.artAbstract}}</p></li>
                    </ul>
                </div>
             </div>
           
             <ul class="pagination" >
               <li><a href="javascript:" onclick="movePage('left');">&laquo;</a></li>
               <template v-for="index in pageCount" >
               <li id="toPage"><a href="javascript:" @click="toPage(index-1)">{{index}}</a></li>
               </template>
               <li><a href="javascript:" onclick="movePage('right');">&raquo;</a></li>
              </ul>
         </div>
        </div>
        <jsp:include page="_foot.jsp"></jsp:include>
 <script src="${path }/websites/demopc/js/wow.min.js"></script>
 <script type="text/javascript"
		src="${path }/resource/js/systools/AjaxProxy.js"></script>
	<script type="text/javascript"
		src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script> 
   <script>
        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new WOW().init();
    };
   
	var app = new Vue({
		el : '#app',
		data : {
			offset : 0,
			limit : 5,
			more : "none",
			artTypeId:null,
			pageCount:0,
			page:1,
			artTypeName:"新闻",
			companyId:18,
			arts : []
		},
		filters : {
			getDate : function(value) {
				var data = new Date(value);
				return data.getFullYear() + "/" + (data.getMonth() + 1)+ "/"+data.getDay() ;
			}
		},
		methods : {
			toPage : function(index) {
				var offset=index*app.limit;
				app.page=index+1;
				$.AjaxProxy({
					c : false,
					p : {
						"offset" :offset,
						"limit" : app.limit,
						"artTypeId":app.artTypeId,
						"companyId":app.companyId
					}
				}).invoke("${path}/spring/web/findNews", function(loj) {
					
					if (loj.getValue("rows").length < 1) {
						app.more = "block";
					} else {
						app.arts = loj.getValue("rows");
						app.offset += app.limit;
						
					}
				}); 
			},
			loadArt : function() {
				$.AjaxProxy({
					c : false,
					p : {
						"artTypeId":app.artTypeId,
						"companyId":app.companyId
					}
				}).invoke("${path}/spring/web/findNews", function(loj) {
					 var count=0;
					var total=loj.getValue("rows").length;
					if(parseInt(total)%5==0){
						count=parseInt(total)/5;
					}else{
						count=parseInt(parseInt(total)/5)+1;
					}
					app.pageCount=count;
					$.AjaxProxy({
						c : false,
						p : {
							"offset" : app.offset,
							"limit" : app.limit,
							"artTypeId":app.artTypeId,
							"companyId":app.companyId
						}
					}).invoke("${path}/spring/web/findNews", function(loj) {
						if (loj.getValue("rows").length < 1) {
							app.more = "block";
						} else {
							app.arts = app.arts.concat(loj.getValue("rows"));
							app.offset += app.limit;
							
						}
					}); 
				});
			},
		},
	});
	app.loadArt();
	function movePage(dir){
		if(dir=="left"){
			var nowPage=parseInt(app.page);
			if(nowPage-1<=1){
				nowPage=1;
			}else{
				nowPage-=1;
			}
			app.toPage(nowPage-1);
		}
		if(dir=="right"){
			var nowPage=parseInt(app.page);
			if(nowPage+1>=app.pageCount){
				nowPage=app.pageCount;
			}else{
				nowPage+=1;
			}
			app.toPage(nowPage-1);
		}
	}
    </script>

 
</body>
</html>